<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRecommendHook } from '@/store/modules/recommend'
import { useSongStoreHook } from '@/store/modules/song'
import { songItem } from '@/store/modules/types'
import MusicTitle from '@/components/common/MusicTitle.vue'
import LineArtists from '@/components/common/LineArtists.vue'

const titleInfo = ref({
  title: '最新音乐',
  path: '/'
})
const recommendStore = useRecommendHook()
const newSongs = computed(() => recommendStore.newSongs)

const addSong = (item: songItem) => {
  useSongStoreHook().addSong(item)
}
</script>

<template>
  <div>
    <MusicTitle :title-info="titleInfo" />
    <div class="recommend_container">
      <template v-for="item in newSongs" :key="item.id">
        <div class="newsong_box">
          <div class="recommend_image" @click="addSong(item.song)">
            <img
              :class="item.name === '每日歌曲推荐' ? 'daily_song' : ''"
              v-lazy="item.picUrl"
            />
            <i class="recommend_play">
              <i class="icon-24gf-play"></i>
            </i>
          </div>

          <div class="newsong_textarea">
            <p class="ellipsis">
              {{ item.song.name }}
              <span
                v-show="item.song.transName"
                style="color: var(--music-link-color)"
                >( {{ item.song.transName }} )</span
              >
            </p>
            <p class="ellipsis">
              <LineArtists :artists="item.song.artists" />
            </p>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.recommend_play {
  opacity: 1;
}
.recommend_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.newsong_box {
  display: flex;
  width: 32%;
  height: auto;
  margin-bottom: 20px;
  margin-right: 2%;
  position: relative;
  border-radius: 5px;
  &:hover {
    background-color: var(--music-color-1);
  }
  &:nth-child(3n) {
    margin-right: 0;
  }
  .recommend_image {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    min-height: 60px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
  }
  .newsong_textarea {
    flex: 1;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    p {
      line-height: 28px;
      color: var(--music-title-color);
    }
  }
  .recommend_play {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
  }
}
</style>
